import { memo } from 'react';
import classNames from 'classnames';
import Login from './components/Login';
import LoginHeader from './components/Header';
import { useAppSelector } from 'modules/store';
import { selectGlobal } from 'modules/global';
import Style from './index.module.less';

export default memo(() => {
  const globalState = useAppSelector(selectGlobal);
  const { theme } = globalState;
  return (
    <div
      className={classNames(Style.loginWrapper, { [Style.light]: theme === 'light', [Style.dark]: theme !== 'light' })}
    >
      <LoginHeader />
      <div className={Style.loginContainer}>
        <div className={Style.titleContainer}>
          <h1 className={Style.title}>欢迎登录</h1>
          <h1 className={Style.title}>图书包间管理系统</h1>
        </div>
        <Login />
      </div>
      <footer className={Style.copyright}>
        版权所有 © 河南科技学院 图书馆包间预约系统
        <br />
        地址：河南省新乡市华兰大道东段90号 邮编：453003
      </footer>
    </div>
  );
});
